import React, {
    PureComponent
} from 'react';

import {
    Image,
    StyleSheet,
    ActivityIndicator
} from 'react-native';

import {
    Status
} from './types';

interface Props {
    status:Status,
    onStatusClick:Function
}

import {
    Press
} from './../../components';

import fail_icon from './img/fail.png';

class MsgStatus extends PureComponent<Props> {
    static defaultProps = {
        onStatusClick: () => null
    }

    _onPress = () => {
        const {
            status,
            onStatusClick
        } = this.props;

        if (status === `send_failed`) {
            onStatusClick()
        }
    }

    render() {
        const {
            status
        } = this.props;

        return (
            <Press
                onPress={this._onPress}
                style={styles.container}
            >
                {status === `send_going` && (
                    <ActivityIndicator/>
                )}
                {status === `send_failed` && (
                    <Image source={fail_icon}/>
                )}
            </Press>
        )
    }
}

export default MsgStatus;

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 12
    }
}) as any;